<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>杭州刺史</title>
	<link rel="stylesheet" href="./css/杭州刺史.css" />
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="iconfont/font_fangdajin/iconfont.css" />
</head>

<body>
	<div id="trail-container"></div>
	<!-- 快捷导航模块开始 -->
	<div class="shortcut">
		<div class="w">
			<div class="LOGO">
				<img src="./img/d.png" alt="logo" />
			</div>
			<div class="Module_classify">
				<ul>
					<li><a href="首页.html">首页</a></li>
					<li><a href="杭州刺史.html">杭州刺史</a></li>
					<li><a href="杭白政绩.html">杭白政绩</a></li>
					<li><a href="经典之作.html">经典之作</a></li>
					<li><a href="登录界面.html">登录</a></li>
				</ul>
			</div>

			<div class="search">
				<input type="search" placeholder="获取帮助" />
				<button><span class="iconfont icon-fangdajing"></span></button>
			</div>
		</div>
	</div>
	<!-- 快捷导航模块结束 -->

	<!-- 背景＋名字模块制作开始 -->
	<div class="bglo">
		<p class="hang">杭</p>
		<p class="zhou">州</p>
		<p class="ci">刺</p>
		<p class="shi">史</p>
	</div>
	<!-- 背景＋名字zhou模块制作结束 -->

	<!-- 刺史经历模块制作开始 -->
	<div class="hangzhoucs w">
		<div class="main_head">
			<h2>刺史经历</h2>
			<p>Governing experience</p>
		</div>
		<div class="csjl">
			<div class="csjlimg">
				<img src="./img/2.png" alt="" />
			</div>
			<div class="csjltext">
				<h2>822年</h2>
				<p>被任命为杭州刺史，开始了他的任期。</p>
			</div>
		</div>
		<div class="csjl">
			<div class="csjlimg">
				<img src="./img/baidi.webp" alt="" />
			</div>
			<div class="csjltext">
				<h2>822年至823年间</h2>
				<p>发动民工加高西湖堤坝，修筑水闸，增加了湖水容量，解决了灌溉问题。</p>
			</div>
		</div>
		<div class="csjl">
			<div class="csjlimg">
				<img src="./img/liukoujing.webp" alt="" />
			</div>
			<div class="csjltext">
				<h2>823年</h2>
				<p>组织群众重新浚治了六口井，改善了杭州居民的用水条件。</p>
			</div>
		</div>
		<div class="csjl">
			<div class="csjlimg">
				<img src="./img/hzcsbjylkhz.jpg" alt="" />
			</div>
			<div class="csjltext">
				<h2>824年5月</h2>
				<p>任期结束，离开杭州，转任太子左庶子分司东都。</p>
			</div>
		</div>
	</div>
	<!-- 刺史经历模块制作结束 -->

	<!-- 两侧图案制作开始 -->
	<div class="maobi">
		<img src="./img/shuimomaobi.jpg" alt="水墨毛笔" />
	</div>
	<div class="moshui">
		<img src="./img/hangzhoucishiphoto1.jpg" alt="水墨毛笔" />
	</div>
	<div class="shufa">
		<img src="img/hangzhoucishi2.jpg" alt="水墨毛笔" />
	</div>




	<!-- 两侧图案制作结束 -->

	<!-- 结束部分footer制作开始 -->
	<footer>
		<h1>杭州相关名人和古诗</h1>
		<P>请联系我们<a href="19857979455 ">19857979455</a> | 邮箱地址：<a href="3086547255@qq.com">3086547255@qq.com</a></P>
		<h3>版权所有&copy
			浙金院官网
			人工231王家侃
			学号2023630113
		</h3>
	</footer>
	<!-- 结束部分footer制作结束 -->
	<script>
		//诗歌倾斜效果
		document.addEventListener('DOMContentLoaded', () => {
			const bgContainer = document.createElement('div');
			bgContainer.style.position = 'fixed';
			bgContainer.style.top = '0';
			bgContainer.style.left = '0';
			bgContainer.style.width = '100%';
			bgContainer.style.height = '100%';
			bgContainer.style.pointerEvents = 'none';
			bgContainer.style.overflow = 'hidden';
			document.body.appendChild(bgContainer);

			const poems = [
				'︽忆江南︾江南好，风景旧曾谙。',
				'︽钱塘湖春行︾孤山寺北贾亭西，水面初平云脚低。',
				'︽赋得古原草送别︾ 离离原上草，一岁一枯荣。',
				'︽问刘十九︾ 绿蚁新醅酒，红泥小火炉。',
				'︽忆江南︾日出江花红胜火，春来江水绿如蓝。能不忆江南？',
				'︽暮江吟︾ 一道残阳铺水中，半江瑟瑟半江红。',
				"︽春题湖上︾ 碧毯线头抽早稻，青罗裙带展新蒲。"
			];

			function createFallingPoem() {
				const poem = document.createElement('div');
				const lines = poems[Math.floor(Math.random() * poems.length)].split('');
				poem.innerHTML = lines.join('<br>'); // 将诗句按字换行显示为竖排
				poem.style.position = 'absolute';
				poem.style.fontSize = `${Math.random() * 14 + 18}px`;
				poem.style.color = 'rgba(0, 0, 0, 0.7)';
				poem.style.whiteSpace = 'nowrap';
				poem.style.top = '-200px';
				poem.style.zIndex = 1;
				poem.style.textAlign = 'center';

				// 随机分布在左侧或右侧
				const side = Math.random() > 0.5 ? 'left' : 'right';
				if (side === 'left') {
					poem.style.left = `${Math.random() * 20}vw`;
				} else {
					poem.style.left = `${80 + Math.random() * 20}vw`;
				}

				poem.style.animation = 'fall linear 8s forwards';

				bgContainer.appendChild(poem);

				// 移除动画结束后的诗句
				poem.addEventListener('animationend', () => {
					poem.remove();
				});
			}

			// 每800ms生成一个新的诗句
			setInterval(createFallingPoem, 1500);

			// 添加CSS动画
			const style = document.createElement('style');
			style.textContent = `
        @keyframes fall {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(100vh);
                opacity: 0;
            }
        }
    `;
			document.head.appendChild(style);
		});

		// 鼠标拖尾效果
		document.addEventListener('DOMContentLoaded', () => {
			const trailContainer = document.getElementById('trail-container');
			const particles = [];
			let lastParticleTime = 0; // 用于记录上次生成粒子的时间

			document.addEventListener('mousemove', (e) => {
				const now = Date.now();
				if (now - lastParticleTime > 50) { // 控制生成频率
					createParticle(e.clientX, e.clientY);
					lastParticleTime = now;
				}
			});

			function createParticle(x, y) {
				const particle = document.createElement('img');
				particle.src = './img/shuimotexiao(dan).png'; // 使用透明背景图片
				particle.classList.add('particle');
				particle.style.left = `${x - 5}px`;
				particle.style.top = `${y - 5}px`;
				trailContainer.appendChild(particle);
				particles.push(particle);

				setTimeout(() => {
					particle.classList.add('fade');
					particle.addEventListener('animationend', () => {
						particle.remove();
						particles.splice(particles.indexOf(particle), 1);
					});
				}, 100); // 迅速开始淡出
			}

			setInterval(() => {
				particles.forEach((particle) => {
					if (particle.classList.contains('fade')) {
						particle.remove();
						particles.splice(particles.indexOf(particle), 1);
					}
				});
			}, 1000);

		});
	</script>
</body>

</html>